iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
  1. 啟用 Velo 開發工具
    首先,你需要在 Wix 中啟用 Velo:
    打開 Wix 編輯器。
    點擊頂部菜單中的 開啟 Velo。
  2. 配置標題和段落
    你可以用 Velo 來動態顯示或更改文字內容。以下是動態設置標題和文章內容的範例:
    HTML 目標結構
    html
    複製程式碼

JavaScript(Velo)範例
javascript
複製程式碼
$w.onReady(function () {
// 設置標題和文章段落
$w("#mainTitle").text = "黑膠唱片的浪漫";
$w("#description").text = "黑膠唱片喚醒了過往時光的記憶,在懷舊的旋律中漫遊。";
});

在這段程式碼中,$w 是 Wix Velo 的主要物件,用來控制頁面的元素。#mainTitle 和 #description 是網頁元素的 ID。
3. 圖像配置
如果想要動態載入或更改網頁上的圖片,Velo 提供了簡單的接口。
➡️假設你有一個圖片元素,想要展示黑膠唱片的圖片:
HTML 目標結構
html
複製程式碼

JavaScript(Velo)範例
javascript
複製程式碼
$w.onReady(function () {
// 設置圖片的來源
$w("#vinylImage").src = "https://your-image-url.com/vinyl-record.jpg";
});

這樣,你可以將任何圖片動態地加載到頁面上,圖片的來源可以是外部網址,也可以是你上傳到 Wix 媒體庫的圖片。


上一篇
設計網頁這麼簡單?除了html、css等還需要注意什麼
下一篇
DAY19那我們趕快來寫寫看程式吧!html測試
系列文
一個網頁的誕生!教你從基礎到自行完成設計網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言